<!--
 * @Author: hwd heweidong@proya.com
 * @Date: 2024-12-11 15:00:29
 * @LastEditors: hwd heweidong@proya.com
 * @LastEditTime: 2024-12-18 14:15:33
 * @FilePath: \my-home\src\components\login.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import { setToken, setUser, getUser } from "@/utils/local";
import utils from "@/utils/utils";
import api from "@/api/auth/user";
import pubsub from "pubsub-js";
type stringKey = Record<string, any>;
const state: stringKey = reactive({
    username: "",
    password: "",
    email: "",
    placeholder: "",
    ifShow: false,
});
const account1: any = ref(null);
const account2: any = ref(null);
const open = () => {
    state.ifShow = true;
    account1.value.focus();
    const el: any = document.querySelector(".login-warp");
    el.style.backgroundColor = "var(--c-shadow)";
};
const close = () => {
    state.ifShow = false;
};
let focus = (e: any, val: any) => {
    let el_input = e.target;
    let el_label = e.target.parentNode.parentNode.nextSibling;
    if (el_label) {
        el_label.style.transform = "translate(-10px,-16px)";
        el_label.style.fontSize = "12PX";
        el_label.style.color = "var(--el-color-primary)";
        el_input.setAttribute("placeholder", `请输入${el_label.outerText.replace(/\s*/g, "")}`);
    }
};
let blur = (e: any, val: any) => {
    if (val) return;
    let el_input = e.target;
    let el_label = e.target.parentNode.parentNode.nextSibling;
    if (el_label) {
        el_label.style.transform = "translateY(0)";
        el_label.style.fontSize = "14px";
        el_label.style.color = "var(--c-text-2)";
        el_input.setAttribute("placeholder", "");
    }
};
const register = async () => {
    if (state.username === "" || state.password === "" || state.email === "") {
        ElMessage({ message: "请输入账号&密码", type: "warning" });
        return;
    }
    const emailReg = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    if (!emailReg.test(state.email)) {
        ElMessage({ message: "请输入正确的邮箱", type: "warning" });
        return;
    }
    const res: any = await api.register({ username: state.username, password: state.password, email: state.email, avatarurl: "" });
    if (res.code === 1) {
        ElMessage({ message: res.msg, type: "success" });
        clearInp();
        toLogin();
    }
};
const login = async () => {
    if (state.username === "" || state.password === "") {
        ElMessage({ message: "请输入账号&密码", type: "warning" });
        return;
    }
    const res: any = await api.login({ username: state.username, password: state.password });
    if (res.code === 1) {
        ElMessage({ message: res.msg, type: "success" });
        clearInp();
        close();
        setUser(res.data.user)
        setToken(res.data.token)
        pubsub.publish("updateUser");
    }
};
const toRegister = () => {
    utils.setStyle(".login", "z-index", "2");
    utils.setStyle(".reg", "z-index", "3");
    utils.setStyle(".login", "transform", "rotateY(180deg)");
    utils.setStyle(".reg", "transform", "rotateY(360deg)");
    clearInp();
    account2.value.focus();
};
const toLogin = () => {
    utils.setStyle(".login", "z-index", "3");
    utils.setStyle(".reg", "z-index", "2");
    utils.setStyle(".login", "transform", "rotateY(360deg)");
    utils.setStyle(".reg", "transform", "rotateY(180deg)");
    clearInp();
    account1.value.focus();
};
const clearInp = () => {
    state.username = "";
    state.password = "";
    state.email = "";
    state.placeholder = "";
};
defineExpose({
    open,
});
</script>
<template>
    <div class="login-warp" v-show="state.ifShow">
        <form class="login" v-show="state.ifShow">
            <div class="close" @click="close">
                <el-icon :size="20">
                    <Close />
                </el-icon>
            </div>
            <div class="ipt-box">
                <el-input v-model="state.username" ref="account1" clearable
                    @focus="(e: any) => { focus(e, state.username) }" @blur="(e: any) => { blur(e, state.username) }" />
                <div class="label username">账 号</div>
            </div>
            <div class="ipt-box">
                <el-input v-model="state.password" @focus="(e: any) => { focus(e, state.password) }"
                    @blur="(e: any) => { blur(e, state.password) }" :show-password="true" clearable />
                <div class="label password">密 码</div>
            </div>
            <el-button @click="login" style="width: 100%; margin-top: 10px" type="primary"> 登 录 </el-button>
            <div class="reg-warp">
                <el-button @click="toRegister" text size="small">立即注册</el-button>
                <el-button text size="small" disabled>忘记密码</el-button>
            </div>
            <div class="other-login-title">一一 其他账号登录 一一</div>
            <div class="other-login">
                <img class="csdn" src="@/assets/imgs/icon_csdn.png" />
                <img class="qq" src="@/assets/imgs/icon_QQ.png" />
            </div>
        </form>

        <form class="reg">
            <div class="close" @click="close">
                <el-icon :size="20">
                    <Close />
                </el-icon>
            </div>
            <div class="ipt-box">
                <el-input v-model="state.username" ref="account2" @focus="(e: any) => { focus(e, state.username) }"
                    @blur="(e: any) => { blur(e, state.username) }" clearable />
                <div class="label username">账 号</div>
            </div>
            <div class="ipt-box">
                <el-input v-model="state.email" @focus="(e: any) => { focus(e, state.email) }"
                    @blur="(e: any) => { blur(e, state.email) }" clearable />
                <div class="label email">邮 箱</div>
            </div>
            <div class="ipt-box">
                <el-input v-model="state.password" @focus="(e: any) => { focus(e, state.password) }"
                    @blur="(e: any) => { blur(e, state.password) }" :show-password="true" clearable />
                <div class="label password">密 码</div>
            </div>
            <el-button @click="register" style="width: 100%; margin-top: 10px" type="primary"> 注 册 </el-button>
            <div class="reg-warp">
                <el-button @click="toLogin" text size="small">去登录</el-button>
            </div>
        </form>
    </div>
</template>
<style lang="scss" scoped>
.login-warp {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: var(--c-shadow);
    transition: all 0.5s;
    z-index: 999;

    .login,
    .reg {
        width: 350px;
        height: 380px;
        background-color: var(--c-base);
        left: calc(50% - 175px);
        top: 20%;
        border-radius: 10px;
        overflow: hidden;
        padding: 60px 30px 20px 30px;
        transition: 0.5s;
        position: absolute;

        .close {
            cursor: pointer;
            transition: 0.3s;
            width: max-content;
            position: absolute;
            right: 20px;
            top: 20px;

            &:hover {
                color: var(--el-color-primary);
            }
        }

        .ipt-box {
            position: relative;
            margin-bottom: 30px;

            .label {
                color: #606266;
                position: absolute;
                left: 10px;
                top: 5px;
                transition: all 0.3s;
                font-size: 14px;
                pointer-events: none;
            }

            &:deep(.el-input__wrapper) {
                box-shadow: none;
                border-bottom: 1px solid #ccc;
                transition: all 0.3s;
                border-radius: 0;
            }

            &:deep(.is-focus) {
                border-bottom: 1px solid var(--el-color-primary);
            }
        }

        .reg-warp {
            display: flex;
            justify-content: space-between;
            margin-top: 15px;
        }

        .other-login-title {
            text-align: center;
            font-size: 12px;
            margin: 20px 0;
            color: var(--c-text-disabled);
        }

        .other-login {
            display: flex;
            justify-content: center;

            img {
                width: 30px;
                margin-right: 10px;
                height: 30px;
                cursor: pointer;
            }

            .qq {
                width: 33px;
                height: 33px;
                transform: translateY(-1px);
            }
        }
    }

    .login {
        z-index: 2;
    }

    .reg {
        transform: rotateY(180deg);
    }
}

@media (max-width: 480px) {

    .login,
    .reg {
        width: 90vw !important;
    }
}
</style>
